<template lang='pug'>
append var
-var imgurl = '../../static/image/'
	.main
		.inner
			.main-top
				.main-left
					img(src=imgurl+'voice.png')
					span 接力世界杯，更懂活动将开始～
				.main-right
					img(src=imgurl+'point.png' 	align = 'middle')
					| 种子：8900枚
			.main-top
				.main-xxx
				.main-right-two(styke='text-align: right' :data-attr="'数量不足请充值'") 数量不足请充值
			.main-top
				.main-xxxx
				.main-right(style='font-size: 16px;background-size:100%;')
					img(src=imgurl+'ginseng.png' 	align = 'middle')
					span(style="position: relative;top: -10px;left: 0px;") 参王： 5 株
					br
					span(style="position: relative;top: -58px;left: 77px;") 极品： 3 株
			.main-middle
				.main-middle-son(:data-attr='"挖参秘籍"') 挖参秘籍
			.main-bottom
				ul
					li(v-for='(item,index) in 40' :key='index')
						img(src=imgurl+'zhongzi3.png')
			con(:tablelist = 'index')
</template>
<script>
import con from "./common/table.vue";
import $ from "jquery"
function randomsort(a, b) {
    return Math.random()>.5 ? -1 : 1;
}
export default {
  data() {
    return {
			time: 0,
			show: false,
      index: {
        title: "挖参排行榜",
				flag: true,
        table: [
          {
            title: "名次",
            list: ["种子总量", "参王", "极品参", "BPX"]
          },
          { title: "1.万妮", list: ["20000", "3株", "30株", "100"] },
          { title: "2.万妮", list: ["20000", "3株", "30株", "100"] },
          { title: "3.万妮玛", list: ["20000", "3株", "30株", "100"] }
        ],
				pop: "距离封山还有30秒，请准备～"
      }
    };
  },
  components: {
    con: con
	},
	mounted() {
		var that = this;
		setTimeout(() => {
			that.seed()
		}, 10);

	},
	methods:{
		seed(){

			var i = 0;
			var arr = [];
			while(i < 40){
				arr.push(i)
				i++;
			}
			arr.sort(randomsort)
			var max_left = $('.main-bottom>ul>li:eq(0)').width() - $('.main-bottom>ul>li:eq(0)>img').width()
			var max_top = $('.main-bottom>ul>li:eq(0)').height() - $('.main-bottom>ul>li:eq(0)>img').height()
			console.log(max_left+'.'+max_top)
			arr.forEach(function(item,index){
					$(".main-bottom>ul>li").eq(item).css({'transition':'all 1s '+(index/15+2)+'s ease','top':'1200px','transform': 'rotateZ(360deg)'})
					$(".main-bottom>ul>li").eq(item).find('img').css({top:Math.random()*max_top+'px',left:Math.random()*max_left+'px'})
			})
			// this.time = (arr.length/15+2+1)*1000;
			// var that = this;
			// max_left = $('.main-bottom').width() - $('.main-bottom>img').width()
			// max_top = $('.main-bottom').height() - $('.main-bottom>img').height()
			// setTimeout(function(){
			// 	console.log(111)
			// 	var length = $('.main-bottom>img').length;
			// 		setTimeout(function(){
			// 			$('.main-bottom>img').css('opacity','1')
			// 				var timer = setInterval(function(){
			// 					arr.sort(randomsort)
			// 					if(arr.length == 0){
			// 						clearInterval(timer);
			// 						$('.main-bottom>img').css('opacity','0')
			// 					}
			// 					var list = parseInt(Math.random()*length);
			// 					for(var i = 0; i<length; i++){
			// 						$('.main-bottom>img:eq('+i+')').css({top:Math.random()*max_top+'px',left:Math.random()*max_left+'px'})
			// 						if(i > list){
			// 							continue;
			// 						}
			// 							$(".main-bottom>ul>li").eq(arr[i]).find('img').remove()
			// 							arr.splice(i,1)
			// 					}
							
			// 				},1200)
			// 		},10)
			// 	that.show = true;
			// 	for(var i = 0; i < length;i++){
			// 		$('.main-bottom>img:eq('+i+')').css({top:Math.random()*max_top+'px',left:Math.random()*max_left+'px'})
			// 	}
		
			// },this.time+100)
		}
	}
};
</script>
<style lang='less'>
@imgurl: "../../static/image/";
.nav {
  height: 76px;
  width: 300px;
  margin: 0 auto;
  background-image: url("@{imgurl}z_3.png");
  background-repeat: no-repeat;
  .font;
  line-height: 47px;
  position: relative;
  top: -28px;
  margin-bottom: 22px;
  text-align: center;
}
.font {
  font-size: 27.67px;
  font-weight: 700;
  color: #fff;
}
.title(@color) {
  position: relative;
  color: white;
  z-index: 0;
  &:before {
    position: absolute;
    z-index: -1;
    content: attr(data-attr);
    -webkit-text-stroke: @color;
  }
}
.main {
  background-image: url("@{imgurl}ginsengbg.png");
  background-repeat: no-repeat;
  height: 1636px;
  padding-top: 50px;
  > .inner {
    margin: 0 auto;
    max-width: 1280px;
    height: 100%;
    > .main-top {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 10px;
      .main-left,
      .main-right {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        box-sizing: border-box;
        line-height: 60px;
      }
      > .main-right {
        width: 220px;
        height: 60px;
        background-image: url("@{imgurl}ginseng_base.png");
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100% 80%;
        text-shadow: 2px 3px 5px rgba(80, 55, 25, 0.7);
        > img {
          margin-right: 20px;
          position: relative;
          top: -8px;
        }
      }
      > .main-right-two {
        color: #fff;
        font-size: 16px;
        position: relative;
        top: -10px;
        padding-right: 20px;
        .title(5px #c64d48);

      }
      > .main-left {
        height: 60px;
        width: 480px;
        background-image: url("@{imgurl}notice_1.png");
        background-size: 480px 60px;
        text-shadow: 2px 3px 5px rgba(80, 55, 25, 0.7);
        > img {
          margin: 0px 20px;
          position: relative;
          top: 11px;
        }
      }
    }
    > .main-middle {
      margin-top: 30px;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 190px;
      > .main-middle-son {
        background-image: url("@{imgurl}excharge.png");
        background-repeat: no-repeat;
        height: 42px;
        width: 136px;
        .font;
        font-size: 16px;
        line-height: 42px;
        text-align: center;
        color: #fff;
        .title(3px #a65f0a);
      }
    }
    > .main-bottom {
      margin-bottom: 40px;
      background-repeat: no-repeat;
      height: 590px;
      background-size: 145%;
			background-position: center -470px;
			position: relative;
			>img{
				position: absolute;
				z-index: 100;
				opacity:0;
				transition: all 1s ease;
			}
			ul{
				height: 100%;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				position: relative;
				top: -1200px;
				li{
					height: 25%;
					width: 10%;
					box-sizing: border-box;
					position: relative;		
					top: 0;
					transform: rotateZ(0deg);
					img{
						top: 0;
						left: 0;
						position: relative;
					}
				}
			}
    }
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: 100%;
}
</style>
